<template>
  <el-form ref="updateForm" size="small" :model="parmsValue" label-width="180px" :rules="form.rules" class="middle-form-page">
    <el-form-item prop="fee_name" label="费用类型">
      <el-input v-model="parmsValue.fee_name" :clearable="true" :disabled="true" />
    </el-form-item>
    <el-form-item v-show="parmsValue.fee_adtype !== 2" prop="billing_number" label="计费基数">
      <el-select v-model="parmsValue.billing_number" :clearable="true" :disabled="detailMod">
        <el-option v-for="(item,index) in dict.t8_billing_number" :key="index" :value="index" :label="item" />
      </el-select>
    </el-form-item>
    <el-form-item v-show="parmsValue.fee_adtype !== 2" prop="collect_fee_cycle" label="费用支付频率">
      <el-select v-model="parmsValue.collect_fee_cycle" :clearable="true" :disabled="detailMod">
        <el-option v-for="(item,index) in dict.t8_pay_fee" :key="index" :value="index" :label="item" />
      </el-select>
    </el-form-item>
    <el-form-item v-show="parmsValue.fee_adtype !== 2" prop="fee_model" label="收费模式">
      <el-select v-model="parmsValue.fee_model" :clearable="true" :disabled="detailMod">
        <el-option v-for="(item,index) in dict.t8_invest_fee_model" :key="index" :value="index" :label="item" />
      </el-select>
    </el-form-item>
    <el-form-item v-show="parmsValue.fee_model !== '2'" prop="rates_value" label="费率值(%)">
      <el-input v-model="parmsValue.rates_value" :clearable="true" :disabled="detailMod" />
    </el-form-item>
    <el-form-item v-show="parmsValue.fee_model !== '2'" prop="fee_base" label="计费基础">
      <el-select v-model="parmsValue.fee_base" :clearable="true" :disabled="detailMod">
        <el-option v-for="(item,index) in dict.t8_intr_base" :key="index" :value="index" :label="item" />
      </el-select>
    </el-form-item>
    <el-form-item v-show="parmsValue.fee_model === '2'" prop="cost_value" label="费用值(元)">
      <el-input v-model="parmsValue.cost_value" :clearable="true" :disabled="detailMod" />
    </el-form-item>
    <el-form-item v-show="parmsValue.fee_adtype !== 2 && parmsValue.fee_model !== '2'" prop="cost_value_down" label="最低费用(元)">
      <el-input v-model="parmsValue.cost_value_down" :clearable="true" :disabled="detailMod" />
    </el-form-item>
    <el-form-item v-show="parmsValue.fee_adtype !== 2 && parmsValue.fee_model !== '2'" prop="cost_value_up" label="最高费用(元)">
      <el-input v-model="parmsValue.cost_value_up" :clearable="true" :disabled="detailMod" />
    </el-form-item>
    <el-form-item v-show="parmsValue.fee_adtype !== 2" prop="nextfeeworkday" label="非工作日顺延">
      <el-select v-model="parmsValue.nextfeeworkday" :clearable="true" :disabled="detailMod">
        <el-option v-for="(item,index) in dict.t8_next_workday" :key="index" :value="index" :label="item" />
      </el-select>
    </el-form-item>
    <el-form-item v-show="parmsValue.fee_adtype !== 2 && parmsValue.collect_fee_cycle !== '9'" prop="firstdate" label="首次付费日">
      <el-date-picker v-model="parmsValue.firstdate" format="yyyy-MM-dd" value-format="yyyyMMdd" :clearable="true" :disabled="detailMod" />
    </el-form-item>
    <el-form-item v-show="false" prop="customfeeday" label="自定义付费日">
      <el-date-picker v-model="parmsValue.customfeeday" format="yyyy-MM-dd" value-format="yyyyMMdd" :clearable="true" :disabled="detailMod" />
    </el-form-item>
    <el-form-item v-show="false" prop="val_date_str" label="设定费用日期">
      <el-input v-model="parmsValue.val_date_str" :clearable="true" :disabled="detailMod" />
    </el-form-item>
    <el-form-item v-show="false">
      <el-button type="success" size="small" @click="detail">付费详情</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    name: 'FeePage',
    props: {
      editMod: {
        type: String,
        default: 'update'
      },
      parmsValue: {
        type: Object,
        default: () => {
          return {
            val_date_str: '',
            customfeeday: '',
            firstdate: '',
            fee_name: '',
            billing_number: '0',
            collect_fee_cycle: '',
            fee_model: '0',
            rates_value: '0',
            fee_base: '0',
            cost_value: '0',
            cost_value_down: '0',
            cost_value_up: '0',
            nextfeeworkday: ''
          }
        }
      },
      dict: {
        type: Object,
        default: () => {
          return {
            billing_number: {},
            t8_pay_fee: {},
            t8_invest_fee_model: {},
            t8_next_workday: {},
            t8_intr_base: {}
          }
        }
      }
    },
    data() {
      return {
        form: {
          rules: {
            billing_number: [{ required: true, message: '计费基数必选', trigger: 'change' }],
            rates_value: [{ required: true, message: '费用值必填', trigger: 'change' }],
            fee_base: [{ required: true, message: '计费基础必选', trigger: 'change' }],
            collect_fee_cycle: [{ required: true, message: '费用支付频率必选', trigger: 'change' }],
            fee_model: [{ required: true, message: '收费模式必选', trigger: 'change' }],
            nextfeeworkday: [{ required: true, message: '是否非工作日顺延必选', trigger: 'change' }],
            firstdate: [{ required: true, message: '首次付费日必选', trigger: 'change' }],
            cost_value: [{ required: true, message: '费用值必填', trigger: 'change' }]
          }
        }
      }
    },
    computed: {
      updateMod() {
        return this.editMod === 'update'
      },
      detailMod() {
        return this.editMod === 'detail'
      },
      addMod() {
        return this.editMod === 'add'
      }
    },
    // 生命周期开始
    beforeMount() {

    },
    // 生命周期结束
    methods: {
      detail() {

      }
    }
  }
</script>

<style scoped>

</style>
